<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		*{margin:0;padding:0;}
		/*第一种方法*/
		/*.left{float:left;height:200px;width:200px;background: pink;}
		.right{float:right;height:200px;width:200px;background: skyblue;}
		.middle{height:500px;background: red;overflow:hidden;}*/
		
		/*第二种方法*/
		/*.left{float:left;height:200px;width:200px;background: pink;}
		.right{float:right;height:200px;width:200px;background: skyblue;}
		.middle{height:500px;background: red;margin-left:200px;margin-right: 200px;}*/
		
	/*	第三种方法*/
		.left{position:absolute;left:0;height:200px;width:200px;background: pink;}
		.right{position:absolute;right:0;float:right;height:200px;width:200px;background: skyblue;}
		.middle{height:500px;background: red;margin-left:200px;margin-right: 200px;}
		</style>
	</head>
	<body>
		<div class="left"></div>
		<div class="right"></div>
		<div class="middle"></div>
	</body>
</html>
